<template>
  <div>
    <!-- 底部导航开始 -->
    <div>
      <tabbar>
        <tabbar-item v-link="{name:'index'}">
          <img slot="icon" src="../assets/images/diamond.png">
          <span slot="label">出售</span>
        </tabbar-item>
        <tabbar-item show-dot>
          <img slot="icon" src="../assets/images/bulb.png">
          <span slot="label">问题</span>
        </tabbar-item>
        <tabbar-item>
          <img slot="icon" src="../assets/images/camera.png">
          <span slot="label"></span>
        </tabbar-item>
        <tabbar-item selected>
          <img slot="icon" src="../assets/images/paperplane.png">
          <span slot="label">招聘</span>
        </tabbar-item>
        <tabbar-item>
          <img slot="icon" src="../assets/images/user.png">
          <span slot="label">我的</span>
        </tabbar-item>
      </tabbar>
    </div>
    <!-- 底部导航结束 -->
  </div>
</template>

<style lang="less">
  .weui_tabbar {
    position: fixed;
    left: 0px;
    right: 0px;
    background: #6fc8ea;
  }
  .weui_tabbar_item .weui_tabbar_label span{ color: #fff;}
  .weui_tabbar_item {
    position: relative;
  }
  .weui_tabbar_item:nth-child(3) .weui_tabbar_icon{
    background: #6fc8ea;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    position: absolute;
    top: -22px;
    left: 50%;
    margin-left: -28px;
  }
  .weui_tabbar_item:nth-child(3) .weui_tabbar_icon:after {
    display: inline-block;
    content: "";
    width: 50px;
    height: 50px;
    background: #7fd3f7;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -25px;
  }
  .weui_tabbar_item:nth-child(3) .weui_tabbar_icon img {
    position: absolute;
    z-index: 11;
    width: 30px;
    height: 30px;
    left: 50%;
    margin-left: -15px;
    top: 21%;
  }
</style>

<script>
  import {Tabbar, TabbarItem} from 'vux';
  export default {
    components: {
      Tabbar,
      TabbarItem,
    },
  };
</script>